<template>
    <div class="comment-editor">
        <el-input
            v-model="textarea"
            resize="none"
            type="textarea"
            id="textarea"
            rows="5"
            placeholder="请输入您想说的话"
        ></el-input>
        <div class="opration">
            <el-popover :width="400" trigger="click">
                <template #reference>
                    <div class="emoji-panel-open">
                        <img src="@/assets/image/emoji_sprite.png" />
                    </div>
                </template>
                <template #default>
                    <div class="emoji-list">
                        <el-tooltip
                            v-for="(item, index) in emojiList"
                            :key="item.id"
                            effect="dark"
                            :content="item.name"
                            placement="top-start"
                        >
                            <a
                                href="javascript:void(0)"
                                class="emoji-item"
                                @click="getEmoji(index)"
                            >
                                {{ item.char }}
                            </a>
                        </el-tooltip>
                    </div>
                </template>
            </el-popover>
        </div>
    </div>
</template>

<script>
import { ref, watch } from 'vue';
import Emojis from './emoji.json';

export default {
    name: 'Emojis',
    props: {
        // v-model 实现方式
        modelValue: {
            type: String,
            default: ''
        }
    },
    emits: ['update:modelValue'],
    setup(props, context) {
        let emojiList = Emojis;
        let textarea = ref('');

        const getEmoji = (index) => {
            let text = textarea.value;
            let srt = emojiList[index].char;
            textarea.value = text + srt;
        };

        watch(textarea, (newVal, oldVal) => {
            context.emit('update:modelValue', newVal);
        });
        watch(props, (newVal, oldVal) => {
            if (!newVal.modelValue) textarea.value = '';
        });

        return {
            emojiList,
            textarea,
            getEmoji
        };
    }
};
</script>